import React, { useEffect } from 'react';
import { Input, InputNumber } from 'antd';

const { TextArea, Password } = Input;

const oTypeComp = {
  input: Input,
  textarea: TextArea,
  number: InputNumber,
  password: Password,
};

const defaultProps = {
  textarea: { rows: 5 },
  password: { visibilityToggle: false },
};

export default function CustomeInput({
  type,
  value,
  onChange,
  initValue,
  onHandleChange,
  placeholder = '请输入',
  ...rest
}) {
  const Component = oTypeComp[type] || Input;
  useEffect(() => {
    if (initValue) {
      onChange(initValue);
    }
  }, [initValue]);
  const handleChange = (e) => {
    const changeValue = e?.target?.value;
    // 自定义表单控件change事件
    onChange(changeValue);
    // 页面自定义change事件
    onHandleChange?.(changeValue);
  };
  return Component ? (
    <Component
      defaultValue={initValue}
      placeholder={placeholder}
      value={value}
      onChange={(e) => handleChange(e)}
      {...(defaultProps[type] || {})}
      {...rest}
    />
  ) : null;
}
